import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';

const RadarChart = ({ stockData, stockId }) => {
    const canvasRef = useRef(null);

    useEffect(() => {
        const ctx = canvasRef.current.getContext('2d');
        const radarChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: Object.keys(stockData),
                datasets: [{
                    label: stockId,
                    data: Object.values(stockData),
                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                    borderColor: 'rgb(255, 99, 132)',
                    pointBackgroundColor: 'rgb(255, 99, 132)'
                }]
            },
            options: {
                scales: {
                    r: {
                        angleLines: {
                            display: false
                        },
                        suggestedMin: 0,
                        suggestedMax: Math.max(...Object.values(stockData))
                    }
                },
                plugins: {
                    legend: {
                        display: false // 隐藏图例
                    }
                },
                maintainAspectRatio: false // 允许图表自适应容器大小
            }
        });

        return () => radarChart.destroy();
    }, [stockData, stockId]);

    return <canvas ref={canvasRef} style={{ width: '100%', height: '300px' }}></canvas>; // 调整高度以减少留白
};

export default RadarChart;















// import React, { useEffect, useRef } from 'react';
// import Chart from 'chart.js/auto';

// const RadarChart = ({ stockData, stockId }) => {
//     const canvasRef = useRef(null);

//     useEffect(() => {
//         const ctx = canvasRef.current.getContext('2d');
//         const radarChart = new Chart(ctx, {
//             type: 'radar',
//             data: {
//                 labels: Object.keys(stockData),
//                 datasets: [{
//                     label: stockId,
//                     data: Object.values(stockData),
//                     backgroundColor: 'rgba(255, 99, 132, 0.5)',
//                     borderColor: 'rgb(255, 99, 132)',
//                     pointBackgroundColor: 'rgb(255, 99, 132)'
//                 }]
//             },
//             options: {
//                 scales: {
//                     r: {
//                         angleLines: {
//                             display: false
//                         },
//                         suggestedMin: 0,
//                         suggestedMax: Math.max(...Object.values(stockData))
//                     }
//                 },
//                 plugins: {
//                     legend: {
//                         display: false // 隐藏图例
//                     }
//                 },
//                 maintainAspectRatio: true,
//                 aspectRatio: 1 // 维持正方形，避免图形过大
//             }
//         });

//         return () => radarChart.destroy();
//     }, [stockData, stockId]);

//     return <canvas ref={canvasRef} style={{ width: '100%', height: 'auto' }}></canvas>;
// };

// export default RadarChart;
















// // RadarChart.js
// import React, { useEffect, useRef } from 'react';
// import Chart from 'chart.js/auto';

// const RadarChart = ({ stockData, stockId }) => {
//     const canvasRef = useRef(null);

//     useEffect(() => {
//         const ctx = canvasRef.current.getContext('2d');
//         const radarChart = new Chart(ctx, {
//             type: 'radar',
//             data: {
//                 labels: Object.keys(stockData),
//                 datasets: [{
//                     label: stockId,
//                     data: Object.values(stockData),
//                     backgroundColor: 'rgba(255, 99, 132, 0.5)',
//                     borderColor: 'rgb(255, 99, 132)',
//                     pointBackgroundColor: 'rgb(255, 99, 132)'
//                 }]
//             },
//             options: {
//                 scales: {
//                     r: {
//                         angleLines: {
//                             display: false
//                         },
//                         suggestedMin: 0,
//                         suggestedMax: Math.max(...Object.values(stockData))
//                     }
//                 },
//                 plugins: {
//                     legend: {
//                         position: 'top'
//                     }
//                 },
//                 maintainAspectRatio: true,
//                 aspectRatio: 1 // 维持正方形，避免图形过大
//             }
//         });

//         return () => radarChart.destroy();
//     }, [stockData, stockId]);

//     return <canvas ref={canvasRef} style={{ width: '100%', height: 'auto' }}></canvas>;
// };

// export default RadarChart;



// import React, { useEffect, useRef } from 'react';
// import Chart from 'chart.js/auto';

// const RadarChart = ({ stockData, stockId }) => {
//     const canvasRef = useRef(null);

//     useEffect(() => {
//         const ctx = canvasRef.current.getContext('2d');
//         const radarChart = new Chart(ctx, {
//             type: 'radar',
//             data: {
//                 labels: Object.keys(stockData),
//                 datasets: [{
//                     label: stockId,
//                     data: Object.values(stockData),
//                     backgroundColor: 'rgba(255, 99, 132, 0.5)',
//                     borderColor: 'rgb(255, 99, 132)',
//                     pointBackgroundColor: 'rgb(255, 99, 132)'
//                 }]
//             },
//             options: {
//                 scales: {
//                     r: {
//                         angleLines: {
//                             display: false
//                         },
//                         suggestedMin: 0,
//                         suggestedMax: Math.max(...Object.values(stockData)) + 5
//                     }
//                 },
//                 plugins: {
//                     legend: {
//                         position: 'top'
//                     }
//                 },
//                 maintainAspectRatio: true
//             }
//         });

//         return () => radarChart.destroy();
//     }, [stockData, stockId]);

//     return <canvas ref={canvasRef} width="200" height="200"></canvas>;
// };

// export default RadarChart;


